<template>
  <div>

    <el-sub-menu v-if="itemData.childMenus.length>0" :index="''+itemData.id"  v-has="itemData.mcode">

      <template #title >
        {{ itemData.mname }}
      </template>



      <!--调用组件自身，循环item的nodes，实现递归 -->
      <child v-for="item in itemData.childMenus" :key="itemData.id" :itemData="item"></child>
    </el-sub-menu>
    <el-menu-item v-if="itemData.childMenus.length==0"
                  :key="itemData.id" :index="itemData.url"
                  @click="tz({path:itemData.url})"
                  v-has="itemData.mcode"
    >
        {{itemData.mname}}
    </el-menu-item>


  </div>
</template>
<script>
export default {
  name: "child",
  //父菜单向子菜单传递数据的时候使用的是props 将绑定的数据直接传递过来
  props:['itemData'],
  methods:{
    tz(url){
      this.$router.push(url);
    },
  }
}
</script>
<style scoped>
</style>